<script>
import {computed, defineComponent, inject, onMounted, reactive, ref, watch,} from "vue";

export default defineComponent({
    name: 'WordStudy1',
    props: ['message'],
    setup(props){
        //defineProps只能放在setup中.放在onMount出错
        const message = props.message;
        const viewportHeight = ref(window.innerHeight)
        const optionsArea = ref(null)
        const fixArea = ref(null)
         // 更新视口高度的函数
        const updateViewportHeight = () => {
          viewportHeight.value = window.innerHeight;
        };

        // 计算属性，根据视口高度决定组件的显示状态
        const showComponent = computed(() => {
          // 这里是一个示例条件，您可以根据需要设置不同的条件
          // 例如：如果视口高度小于某个特定值，则不显示组件
          if (fixArea.value && optionsArea.value) {
              let out = viewportHeight.value - 58 - fixArea.value.offsetHeight > optionsArea.value.offsetHeight;
              return out ? 'visible' : 'hidden'
          }
        });

        // console.log('mes',message);
        const inputs = ref(['']);
        const inputValues = ref(['']);
        const options = reactive([]);
        const rightRootShow = ref(false);
        const root_meaning = ref('');
        const rightOption = ref({});
        const root_word = ref('');
        const word = ref('');
        const icon_right = inject('icons_right')
        onMounted(()=>{
            // console.log('Mount_props',props)
            word.value = message['word'];
            root_word.value = message['root_word'];
            inputs.value = root_word.value ? Array(root_word.value.length).fill('') : '';
            inputValues.value = Array(inputs.value.length).fill('');
            options.push(...message['options']);
            options.push(message['right_option']);
            rightOption.value =message['right_option'];
            options.sort(() => Math.random() - 0.5);
            // rightRootShow.value = 'false';
            root_meaning.value = message['root_meaning'];
            window.addEventListener('resize', updateViewportHeight);
        })
        
        function handleInput(index) {
            const nextIndex = index + 1;
            const nextInput = document.getElementById(`input-${nextIndex}`);
            inputValues.value[index] = inputValues.value[index].toLowerCase();
            if (inputValues.value[index].length === 1 && nextInput) {
                const nextInput = document.getElementById(`input-${nextIndex}`);
                nextInput.focus();
            }
            //所有空都有值的时候连接起来并做判断
            const allValuesNonEmpty = inputValues.value.every(value => value !== '');
            if (allValuesNonEmpty) {
                const allValues = inputValues.value.filter(value => value !== '');
                const ret = allValues.join('');
                for (let i = 0; i < root_word.value.length; i++) {
                if (root_word.value[i] !== ret[i].toLowerCase()) {
                    document.getElementById(`input-${i}`).classList.add('red-bgcolor')
                }else{
                    document.getElementById(`input-${i}`).classList.add('green-bgcolor')
                }
                document.getElementById(`input-${i}`).setAttribute('disabled','disabled')
                }
                setTimeout(() => {
                rightRootShow.value = !rightRootShow.value;
                }, 500);
            }
        }

        function handleOptions(index){
            const targetIndex = options.findIndex((element)=>element.definition === rightOption.value.definition && element.part_of_speech === rightOption.value.part_of_speech);
            [0,1,2,3].forEach(item => {
              document.getElementById(`button-${item}`).setAttribute('disabled','disabled')
            })
            if(index === targetIndex){
                document.getElementById(`button-${index}`).classList.add('green-bgcolor',"button-disabled")
                // for (let i=0;i<icon_right.value.length;i++){
                //   if (!icon_right.value[i]){
                //     icon_right.value[i] = true;
                //     break;
                //   }
                // }
                this.$emit('option-accept');
            }else{
                document.getElementById(`button-${index}`).classList.add('red-bgcolor','button-disabled')
                document.getElementById(`button-${targetIndex}`).classList.add('green-bgcolor','button-disabled')
                // for (let i=0;i<icon_right.value.length;i++){
                //   if (icon_right.value[i]){
                //     icon_right.value[i] = false;
                //   }
                // }
                this.$emit('option-error');
            }
            //触发父组件的pageChange
            this.$emit('optionclick');
        }
        return{
            handleInput,
            handleOptions,
            inputs,
            inputValues,
            options,
            rightRootShow,
            root_meaning,
            root_word,
            word,
            showComponent,
            viewportHeight,
            fixArea,
            optionsArea,
            icon_right
        }
    }
})
</script>
<template>
    <!-- 做题页 -->
    <div id="appCapsule">
      <div class="card no_bgcolor">
          <div class="card-header d-flex flex-column border-bottom-0" ref="fixArea">
              <h1 class="font-weight-600 text-center" style="font-size: 40px">{{word}}</h1>
            <div class="d-flex mt-3" v-if="isNaN(inputs)">
              <h2 class="mt-1 mb-0" style="height: min-content">词根：</h2>
              <input
                v-for="(input, index) in inputs"
                :key="index"
                :id="'input-' + index"
                type="text"
                class="form-control testinput no_bgcolor"
                maxlength="1"
                v-model="inputValues[index]"
                @input="handleInput(index)"
              />
            </div>
            <div :class="{'rightRoot':'true','mt-2':true,'show':rightRootShow,'hide':!rightRootShow}">
              {{ root_word }}：{{ root_meaning }}
            </div>
          </div>
          <div class="appBottomMenu flex-column no_bgcolor" :style="{'visibility': showComponent}" ref="optionsArea">
            <button
              v-for="(option, index) in options"
              :key="index"
              :id="'button-' + index"
              type="button"
              class="btn diy-button item"
              @click="handleOptions(index)"
            >
              <span class="button_partOfSpeech">{{ option.part_of_speech }}</span>
              <span class="button_definition">{{ option.definition }}</span>
            </button>
          </div>
      </div>
    </div>
</template>

<style lang="scss" scoped>
.appBottomMenu{
  border-top: none;
}

body:not(.dark-mode) {
  .appBottomMenu span{
    color: black;
  }
  .button_partOfSpeech{
    font-size: 18px;
    max-width: 20%;
    width: auto;
    color: #1d2024 !important;
  }
  .button_definition{
    font-size: 18px;
    max-width: 80%;
    width: auto;
    color: #221d1e !important;
  }
}

body.dark-mode {
  .appBottomMenu span{
    color: #fff;
  }
  .button_partOfSpeech{
    font-size: 18px;
    max-width: 20%;
    width: auto;
    color: #fff !important;
  }
  .button_definition{
    font-size: 18px;
    max-width: 80%;
    width: auto;
    color: #fff !important;
  }
  .testinput{
    color: #fff;
  }
  .rightRoot{
    color:#EDEFF6;
    font-size: 22px;
  }
}

.testinput{
  // border: none;
  border-bottom: 2px solid;
  width: 35px;
  height: fit-content;
  font-weight:600;
  font-size:25px;
  margin-left: 0.5rem;
  padding:0;
  vertical-align: bottom;
  text-align: center;
}

.no_bgcolor{
  background: none;
}

#appCapsule{
  height: 100vh;
  padding-bottom: 0;
}
.card{
  height: 100%;
}

//这里两个important是为了防止被bootstrap自带样式覆盖
.green-bgcolor{
  background-color: #78b975 !important;
  border-width: 2px;
}
.red-bgcolor{
  background-color: #f68d7f !important;
  border-width: 2px;
}

.show{
  opacity: 1;
  transition: opacity 0.5s;
}
.hide{
  opacity: 0;
  transition: opacity 0.5s;
}

.rightRoot{
  color:black;
  font-size: 22px;
}
.diy-button{
  width: calc(100% - 2rem);
  display: flex;
  height: 4rem;
  justify-content: space-around;
  margin: 0 auto 1rem;
  border-width: 1px;
  border-color: rgba(192, 192, 192, 0.6);
  background-color: rgba(255, 255, 255, .1);
  box-shadow: 0 2px 4px rgba(128, 128, 128, .8) !important;
}



.button-disabled{
  opacity: 0.9;
}
</style>